<!--  -->
<template>
  <a-modal
    :maskClosable="false"
    :destroyOnClose="true"
    :title="title"
    centered
    :width="500"
    v-model="visible"
    :okText="`发送申请（${list.length}）`"
    @ok="handleOk"
  >
    <div v-for="(item, index) in list" :key="item.id">
      <div class="title">
        <span>人脉资源</span>
        <a v-if="cooperationType === 2" style="margin-left: 20px" @click="handleSetPrice(index, item.projectType)"
          >价格及分润设置</a
        >
      </div>
      <Item
        :priceContact="item.priceContact"
        :priceContactCompute="item.priceContactCompute"
        :pricePeople="item.pricePeople"
        :pricePeopleCompute="item.pricePeopleCompute"
        :discount="item.discount"
      />
    </div>
    <PriceConfigModal ref="priceConfigModal" @ok="getPrice" />
  </a-modal>
</template>

<script>
import { ProType, SelectSource, CooperationSend, cooperationTypeMap } from '@/api/business/cooperation'
import Item from './item.vue'
import Vue from 'vue'
import { TENANTID } from '@/store/mutation-types'
import PriceConfigModal from './priceConfigModal.vue'
export default {
  components: {
    Item,
    PriceConfigModal,
  },
  data() {
    return {
      visible: false,
      infoData: {
        tenantId: undefined,
        logo: '',
        orgName: '',
      },
      title: '添加接入资源',
      proTypeList: [],
      tenantId: undefined,
      typeList: [], //资源选择的列表1人脉
      cooperationType: 1, //接入1、推送2
      list: [],
      cooperationTypeMap,
    }
  },
  computed: {},
  watch: {},
  methods: {
    show(infoData, ids, cooperationType) {
      this.infoData = infoData
      this.tenantId = infoData.tenantId
      this.typeList = ids
      this.cooperationType = cooperationType
      this.title = `添加${this.cooperationTypeMap[this.cooperationType]}资源`
      this.getSelectSource()
      this.visible = true
    },
    async getSelectSource() {
      let { tenantId, typeList, cooperationType } = this
      let res = await SelectSource({
        tenantId,
        typeList,
        cooperationType,
      })
      this.list = res.data || []
      console.log('res--->', res)
    },
    handleSetPrice(index, projectType) {
      this.$refs.priceConfigModal.show(index, this.infoData, this.tenantId, projectType)
    },
    getPrice(index, data) {
      let item = this.list[index]
      Object.keys(item).forEach((k) => {
        if (data.hasOwnProperty(k)) item[k] = data[k]
      })
      this.list.splice(index, item)
    },
    async handleOk() {
      let { tenantId, cooperationType } = this
      let data = this.list.map((item) => {
        return {
          ...item,
          tenantId, //合作的机构
          cooperationType, //接入1、推送2
        }
      })
      let { code, msg } = await CooperationSend(data)
      this.$message[code === 0 ? 'success' : 'error'](msg)
      if (code === 0) {
        this.$emit('success')
      }
      this.visible = false
    },
  },
  created() {},
  mounted() {},
}
</script>
<style lang="less" scoped>
.info {
  .title {
    font-size: 14px;
    font-weight: bold;
    margin: 10px 0;
  }
  .content {
    display: flex;
    align-items: center;
    .logo {
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
    .org {
      margin-left: 10px;
      .name {
        font-size: 14px;
        font-weight: bold;
      }
      .tags {
        margin-top: 10px;
        .tag {
          padding: 2px 5px;
          background: #eee;
          border-radius: 5px;
          margin-right: 10px;
        }
      }
    }
  }
}

.config {
  .title {
    font-size: 16px;
    font-weight: bold;
    padding: 10px 0;
  }
  .content {
    width: 400px;
    margin-top: 10px;
    .line1 {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .line2 {
      text-align: right;
      margin-top: 10px;
      .price {
        color: red;
      }
    }
  }
}
</style>